<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%--
  ~ Copyright 2009-2015 by WWW.KNET.CN  All rights reserved.
  --%>

<html>
<head>
    <title>跟踪记录列表</title>
    <meta name="decorator" content="default"/>
    <style type="text/css">
        .checkBox {
            /*border: 1px solid #2f76e7;*/
            border-radius: 4px;
            padding-bottom: 2px;
            margin-left: 2px;
        }
    </style>
    <script src="${ctxStatic}/highcharts/4.1.8/highcharts.js"></script>
    <script src="${ctxStatic}/highcharts/4.1.8/modules/funnel.js"></script>
    <script src="${ctxStatic}/highcharts/4.1.8/highcharts-3d.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
    <script type="text/javascript">
        $(function () {
            query();
            $("#search").click(function () {
                query();
            });
            $("#productTypeAll").click(function(){
               var checked = $(this).attr("checked");
               if(checked){
                   $("input[name='productTypes']").attr("checked",checked);
               }else{
                   $("input[name='productTypes']").removeAttr("checked");
               }
            });

            function drawFunnel(base){
                base.chart.marginRight = 100;
                base.chart.marginBottom = 100;
                base.plotOptions={
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b> {point.percentage:.1f} %<br>({point.y:,.0f})',
                            softConnector: true
                        },
                        neckWidth: '20%',
                        neckHeight: '20%'
                    }
                };
                $('#container').highcharts(base);
                $("#container").show("slow");
            }

            function drawPie(base){
                base.plotOptions = {
                    pie: {
                        innerSize: 100,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %' }
                    }
                };
                base.chart.options3d={
                    enabled: true,
                    alpha: 45,
                    beta: 0
                };
                $('#container').highcharts(base);
            }

            function drawColumn(base){
                base.chart.options3d={
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    depth: 50,
                    viewDistance: 25
                };
                base.chart.margin = 75;
                base.plotOptions={
                    column: {
                        depth: 25
                    }
                }
                $('#container').highcharts(base);
            }

            function drawChart(data,chartType){
                if(!chartType) {
                    chartType = "pie"
                }
                var row = [];
                $(data.list).each(function(i,item){
                    row.push({
                         name:item.customerStatus.content,
                         y:parseInt(item.predictSaleAmount)
                     });
                });
                var base = {
                    credits:{ text:'', href:'###' },
                    title:{text: data.title},
                    tooltip: {
                        pointFormat: '{point.name}: <b>{point.y}</b>'
                    },
                    chart: {
                        type: chartType
                    },
                    series:[{name: "销售预计",colorByPoint: true,data: row}]
                };

                if("funnel"==chartType){
                    drawFunnel(base);
                }
                if("pie"==chartType){
                    drawPie(base);
                }
                if("column"==chartType){
                    drawColumn(base);
                }
            }

            function query(){
                var query = $("#searchForm").refreshByForm();
                if(!query.query.productTypes||query.query.productTypes.length<=0){
                    alertx("至少选择一种产品");
                    return;
                }else{
                    if(typeof(query.query.productTypes)=="string"){
                        var array = [];
                        array.push(query.query.productTypes);
                        query.query.productTypes = array;
                    }
                }
                var chartType = $("#chartType").val();
                loading("正在查询请稍后!");
                $.ajax({
                   url: query.url,
                   type: "post",
                   data: query.query,
                   dataType: "json",
                   success: function (data) {
                       if (data.state == true) {
                           closeTip();
                           if(data.list.length<=0){
                               alertx("您的选择条件下暂无数据!");
                           }
                           drawChart(data,chartType);
                       } else {
                           alertx(data.message);
                       }
                   },
                   error: function (data, state, error) {
                       alertx(data.responseText, null, '请求错误');
                   }
               });
            }

        });
    </script>
</head>
<body>
<form id="searchForm" action="${ctx}/customer/analyse/chartData" method="post" class="breadcrumb form-search">
    <ul class="ul-form">
        <ul class="ul-form">
            <li>
                <div class="input-prepend">
                    <span class="add-on">图标类型</span>
                    <select id="chartType" class="select-medium">
                        <option value="funnel">漏斗图</option>
                        <option value="pie">饼状图</option>
                        <option value="column">柱状图</option>
                    </select>
                </div>
                <div class="input-prepend">
                    <span class="add-on">预计程度</span>
                    <select name="minPercentage" class="select-medium">
                        <option value="0">全部</option>
                        <option value="10">>=10%</option>
                        <option value="20">>=20%</option>
                        <option value="30">>=30%</option>
                        <option value="40">>=40%</option>
                        <option value="50">>=50%</option>
                        <option value="60">>=60%</option>
                        <option value="70">>=70%</option>
                        <option value="80">>=80%</option>
                        <option value="90">>=90%</option>
                        <option value="100">=100%</option>
                    </select>
                </div>
            </li>
            <li class="clearfix"></li>
        </ul>
        <ul class="ul-form">
            <li>
                <div class="input-prepend">
                    <span class="add-on">开始时间</span>
                    <input readonly="true" name="startDate" type="text" class="input-medium"
                           onmousedown="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                </div>
                <div class="input-prepend">
                    <span class="add-on">结束时间</span>
                    <input readonly="true" name="endDate" type="text" class="input-medium"
                           onmousedown="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                </div>
            </li>
        </ul>
        <ul class="ul-form">
            <li>
                <div class="input-prepend" style="font-size:14px;">
                        <span class="checkBox">
                            <input id="productTypeAll" type="checkbox" checked="checked"/>全选
                        </span>
                        <span class="checkBox">
                            <input name="productTypes" type="checkbox" checked="checked" value="WU"/>无
                        </span>
                    <c:forEach items="${fns:listProductType('OPEN')}" var="item">
                            <span class="checkBox">
                            <input name="productTypes" type="checkbox" checked="checked" value="${item.productTypeValue}"/>
                                ${item.productTypeName}
                            </span>
                    </c:forEach>
                </div>
            </li>

        </ul>
        <ul class="ul-form">
            <li class="btns">
                <button id="search" class="btn btn-small btn-primary" type="button">
                    查询<span class="icon-search icon-white"></span>
                </button>
            </li>
        </ul>
    </ul>
</form>
<div id="container" style="min-width: 600px; height: 400px; max-width: 600px;margin-left: 0px;"></div>
</body>
</html>